<template>
    <div>
      <div class="search">
          <div class="input">
              <p><label>应用名称：</label><el-input placeholder="请输入内容" v-model="searchData.appName" ></el-input></p>
              <p><label>应用状态：</label>
                <el-select v-model="searchData.appStatus" placeholder="请选择">
                  <el-option value=''>请选择</el-option>
                    <el-option
                      v-for="item in Enable"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </p>
              <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
          </div>
      </div>
      <div class="add">
         <el-button type="primary" @click="add">新增</el-button>
      </div>
      <tableVue :list="list" :state="false" v-loading="loading" :total="total" @sizeChange="handSize">
          <slot>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="compile(scope.row)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type='success'
                    v-if="scope.row.appStatus == '停用'"
                    @click="on_off(scope.row,'ENABLE')">启用
                  </el-button>
                  <el-button
                    size="mini"
                    type='success'
                    v-if="scope.row.appStatus == '启用'"
                    @click="on_off(scope.row,'DISABLE')">关闭
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
          </slot>
      </tableVue>
        <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false" >
            <slot>
                <el-form :model="ruleForm" ref="ruleForm" label-width="180px" class="demo-ruleForm">
                    <el-form-item label="应用名称" prop="appName">
                        <el-input v-model="ruleForm.appName" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="签名方式" prop="signType">
                        <el-input v-model="ruleForm.signType" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="应用签名(相应密钥)" prop="respKey">
                        <el-input v-model="ruleForm.respKey" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="应用签名(请求密钥)" prop="reqKey">
                        <el-input v-model="ruleForm.reqKey" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="AES秘钥" prop="aesKey">
                        <el-input v-model="ruleForm.aesKey" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="应用状态" prop="appStatus">
                      <el-select v-model="ruleForm.appStatus" placeholder="请选择">
                          <el-option
                            v-for="item in Enable"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                     </el-form-item>
                    <el-form-item class="confirm">
                        <el-button type="primary" v-if="btnState=='1'" @click="upForm('post')">确定</el-button>
                        <el-button type="primary" v-if="btnState=='2'" @click="upForm('put')">更新</el-button>
                    </el-form-item>
                </el-form>
            </slot>
        </dialogVue>
    </div>
</template>

<script>
import Data from './index.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  payApplyList,addCompileApply,
  switchApply,delApply
} from "@/api/payCenter/payApply";
export default {
  components : {
    tableVue,
    dialogVue
  },
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getPayApplyList()
  },
  methods : {
    getPayApplyList (data) {
        payApplyList(data).then(res=>{
          if (res.data.code == 'OK') {
              this.loading = false;
                this.total = res.data.data.total;
                this.list.tbody = res.data.data.records.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               item.appStatus = item.appStatus == 'DISABLE' ? '停用' : '启用'
               return item;
            });

          } else {
            this.$message.error(res.data.message)
          }
        })
    },
    add () {
      this.dialog = true;
      this.btnState = '1'
      this.ruleForm = {};
    },
    changeData (data) {
      this.dialog = data;
    },
    search () {
      this.getPayApplyList(this.searchData)
    },
    compile (item) {
      this.btnState = '2';
      this.dialog = true;
      this.ruleForm.appName = item.appName;
      this.ruleForm.appStatus = item.appStatus;
      this.ruleForm.signType = item.signType;
      this.ruleForm.respKey = item.respKey;
      this.ruleForm.reqKey = item.reqKey;
      this.ruleForm.aesKey = item.aesKey;
      this.ruleForm.appId = item.appId;
    },
    del (item) {
      this.delMessage(()=>{
          var id = Array.of(item.appId)
          delApply(id).then(res=>{
          if (res.data.code == 'OK') {
              this.$message.success('删除成功');
              this.getPayApplyList();
          } else {
            this.$message.error(res.data.message);
          }
        })
      })
    },
    upForm (method) {
      addCompileApply(this.ruleForm,method).then(res=>{
        if (res.data.code == 'OK') {
            this.dialog = false;
            if (method == 'post') {
              this.$message.success('新增应用成功');
            } else {
              this.$message.success('编辑应用成功');
            }
            this.getPayApplyList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handSize (val) {
      var data = {
        current : val,
      }
      this.getPayApplyList(data)
    },
    on_off (item,isEnable) {
      this.$confirm('此操作永远改变状态, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           var data=  {
             appId : item.appId,
             appStatus : isEnable
           }
           switchApply(data).then(res=>{
             if (res.data.code == 'OK') {
                 this.getPayApplyList()
                if (isEnable == 'ENABLE') {
                  this.$message.success('开启成功')
                } else {
                  this.$message.success('关闭成功')
                }
             } else {
               this.$message.error(res.data.message)
             }
           })
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消操作'
           });
         });

    }
  }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
</style>
